<template>
  <div class="dashboard-page">
    <n-grid :cols="3" :x-gap="24">
      <n-grid-item>
        <n-card title="总简历数" class="stat-card-wrapper">
          <div class="stat-card">
            <n-statistic :value="stats.totalApplicants" :loading="loading">
              <template #prefix>
                <n-icon size="24" color="#2080f0">
                  <PeopleOutline />
                </n-icon>
              </template>
            </n-statistic>
          </div>
        </n-card>
      </n-grid-item>
      
      <n-grid-item>
        <n-card title="今日新增" class="stat-card-wrapper">
          <div class="stat-card">
            <n-statistic :value="stats.todayApplicants" :loading="loading">
              <template #prefix>
                <n-icon size="24" color="#18a058">
                  <TodayOutline />
                </n-icon>
              </template>
            </n-statistic>
          </div>
        </n-card>
      </n-grid-item>
      
      <n-grid-item>
        <n-card title="有效链接数" class="stat-card-wrapper">
          <div class="stat-card">
            <n-statistic :value="stats.activeLinks" :loading="loading">
              <template #prefix>
                <n-icon size="24" color="#f0a020">
                  <LinkOutline />
                </n-icon>
              </template>
            </n-statistic>
          </div>
        </n-card>
      </n-grid-item>
    </n-grid>
    
    <n-card title="最近简历" class="recent-card">
      <div v-if="loading" class="loading-container">
        <n-spin size="medium" />
      </div>
      <n-empty v-else-if="recentApplicants.length === 0" description="暂无简历数据" />
      <n-data-table
        v-else
        :columns="columns"
        :data="recentApplicants"
        :bordered="false"
        :pagination="false"
        :max-height="400"
      />
    </n-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useMessage } from 'naive-ui'
import { PeopleOutline, TodayOutline, LinkOutline } from '@vicons/ionicons5'
import { formatDate } from '../../utils/date'
import adminApi from '../../api/admin'

const message = useMessage()
const loading = ref(true)

// 统计数据
const stats = ref({
  totalApplicants: 0,
  todayApplicants: 0,
  activeLinks: 0
})

// 最近简历
const recentApplicants = ref([])

// 表格列定义
const columns = [
  {
    title: '姓名',
    key: 'name'
  },
  {
    title: '性别',
    key: 'gender',
    render(row) {
      const map = {
        male: '男',
        female: '女',
        other: '其他'
      }
      return map[row.gender] || '未知'
    }
  },
  {
    title: '学历',
    key: 'education',
    render(row) {
      return row.education || '-'
    }
  },
  {
    title: '提交时间',
    key: 'created_at',
    render(row) {
      return formatDate(row.created_at)
    }
  }
]

// 获取统计数据
const getStats = async () => {
  try {
    const res = await adminApi.getStatistics()
    console.log('统计数据响应:', res)
    if (res.success && res.data) {
      stats.value = res.data
    } else {
      message.error('获取统计数据失败: ' + (res.message || '未知错误'))
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
    message.error('获取统计数据失败: ' + (error.message || '网络错误'))
  }
}

// 获取最近简历
const getRecentApplicants = async () => {
  try {
    const res = await adminApi.getRecentApplicants()
    console.log('最近简历响应:', res)
    if (res.success && res.data) {
      recentApplicants.value = res.data
    } else {
      message.error('获取最近简历失败: ' + (res.message || '未知错误'))
    }
  } catch (error) {
    console.error('获取最近简历失败:', error)
    message.error('获取最近简历失败: ' + (error.message || '网络错误'))
  }
}

// 加载所有数据
const loadAllData = async () => {
  loading.value = true
  try {
    // 串行执行以便于调试
    await getStats()
    await getRecentApplicants()
  } catch (error) {
    console.error('加载数据失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadAllData()
})
</script>

<style scoped>
.dashboard-page {
  min-height: 100%;
}

.stat-card-wrapper {
  height: 140px;
  transition: all 0.3s ease;
}

.stat-card-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.stat-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.recent-card {
  margin-top: 24px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
</style> 